<template>
	<div class="messagesWrap">
        <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
            <li v-for="(item, index) in listMessage" :key="index">
                <!-- <div class="timesWrap">
                    <p class="times">12-12 下午1:20</p>
                </div> -->
                <div class="cont">
                    <div class="remind"><i class="ic"></i><span>{{item.messageTitle}} {{item.createDate}}</span></div>
                    <span>运单号:{{item.messageKeywords}}</span>
                    <p>{{item.messageContent}}</p>
                    <!--<div class="line"></div>
                     <div class="more">
                        <a href="javascript:;">查看详情</a>
                        <i class="iconRight"></i>
                    </div> -->
                </div>
            </li>
            <div class="nullData" v-show="isShow">
                    <p>暂无最新数据</p>
            </div>
        </ul>
        <!-- 底部判断是加载图标还是提示“全部加载” -->
        <div class="more_loading">
          <div v-show="showLoading">
            <mt-spinner type="snake" color="#00ccff" :size="10"></mt-spinner>
            <span>正在加载</span>
          </div>
          <span v-show="showALlLoad">已全部加载</span>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import ApiService from '@/services/API-servies'
    import {
    InfiniteScroll,
    Spinner,
  } from 'mint-ui';
	export default{
		data(){
			return{
                 listMessage:[],
                 isShow:false,
                 pageSize:10,
                 pageNo:1,
                 showLoading: false,
                showALlLoad: false,
                busy: true,//默认允许滚动执行loadMore函数
			}
		},
		mounted(){
            setTimeout(() => {
              if(this.$isBrower.isAndroid){

                }else if(this.$isBrower.isIos){
                    this.setIosTitleType();
                }
              }, 0);
            this.getMessage()

		},
		methods:{
            getMessage(flag){
                this.showLoading = true;
                this.showALlLoad = false;
                let params = {
                  pageSize: this.pageSize,
                  pageNo: this.pageNo,

                }
              ApiService.message.load(params).then(res => {
                  this.showLoading = true;
                if (res.meta.retCode === "0") {
                    this.showLoading = true;
                    if (flag) {//判断是否通过分页
                        this.listMessage = this.listMessage.concat(res.data.list);//分页数据追加到这个list里面
                        if (res.data.list.length < 10) {//判断数是否加载完成，就让数据截停
                        this.busy = true;
                        this.showLoading = false;
                        this.showALlLoad = true;
                        } else {
                        this.busy = false;
                        }
                    } else {
                        this.listMessage = res.data.list;
                        this.busy = false;
                        if (res.data.list.length < 10) {//判断数是否加载完成，就让数据截停
                        this.busy = true;
                        this.showLoading = false;
                        this.showALlLoad = true;
                        }
                    }
                // var _data = res.data;
                // for (var i = _data.list.length - 1; i >= 0; i--) {
                //     var _obj = _data.list[i];
                //     this.listMessage.push(_obj);
                //  }
                //  if(_data.length <= 0){
                //     this.isShow = true;
                //  }
                }
              });
            },
            loadMore: function () {
                this.busy = true;
                setTimeout(() => {
                    this.pageNo++;
                    this.getMessage(true);
                }, 500)
            },
            setIosTitleType(){
              let params = {
                isReturn: true,
                isSearch: false,
                isTitleSegment:false
              };
              this.$bridge.callhandler('needBarButton', params, (data) => {})
            }
		},
		filters:{},
		components:{
            MtInfiniteScroll:InfiniteScroll,
            MtSpinner:Spinner
        }
	}
</script>
<style lang="less" type="stylesheet/less">
    @import "~common/less/variable";
    .messagesWrap{
        padding: 30px;
        p{
            line-height: normal;
        }
        ul{
            margin-bottom: 20px;
            li{
                margin-top: 10px;
                .timesWrap{
                    text-align: center;
                    margin-bottom: 30px;
                    .times{
                        display: inline;
                        background: #ccc;
                        padding: 4px 12px;
                        border-radius: 8px;
                        color: #fff;
                    }
                }
                .cont{
                    background: #fff;
                    padding:20px 40px;
                    border:1px solid #DFDFDF;
                    border-radius: 12px;
                    .remind{
                        line-height: 40px;
                        position: relative;
                        .ic{
                            display: inline-block;
                            width: 12px;
                            height: 28px;
                            background: @blue;
                            border-radius: 4px;
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                        }
                        span{
                            color: #999;
                            font-size: 26px;
                            position: relative;
                            left: 20px;
                        }
                    }
                    span{
                        color: #222;
                        font-size: 32px;
                    }
                    p{
                        font-size: 26px;
                        color: #999;
                        font-weight: 400;
                    }
                    .line{
                        height: 2px;
                        width: 100%;
                        border-top: 1px solid #D8D8D8;
                        margin-top: 20px;
                    }
                    .more{
                        position: relative;
                        a{
                            color: #4295FF;
                            font-size: 28px;
                            line-height: 88px;
                        }
                        i{
                            position: absolute;
                            margin:auto;
                            right:0;
                            top:0;
                            bottom:0;
                            display: block;
                            width: 20px;
                            height: 36px;
                            background: url(../../common/imgs/icon/more.png) no-repeat 0 0;
                            background-size:contain;
                        }
                    }
                }
            }
            .nullData {
                background: #fff;
                padding: 40px;
                position: absolute;
                bottom: 0;
                top: 0;
                left: 0;
                right: 0;
                p {
                  padding-top: 240px;
                  background: url(~common/imgs/fach.jpg) no-repeat 50% 0;
                  background-size: 240px 220px;
                  text-align: center;
                  color: #666;
                  margin-top: 40%;
                  font-size: 26px;
                }
              }
        }
        .more_loading {
        text-align: center;
        .mint-spinner-snake {
          display: inline-block;
          vertical-align: middle;
          margin-right: 10px
        }
      }
    }
</style>
